/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';
    /* Project id 3623928 */
    src: url('//at.alicdn.com/t/c/font_3623928_dvd3jzegh7u.woff2?t=1662549346311') format('woff2'),
        url('//at.alicdn.com/t/c/font_3623928_dvd3jzegh7u.woff?t=1662549346311') format('woff'),
        url('//at.alicdn.com/t/c/font_3623928_dvd3jzegh7u.ttf?t=1662549346311') format('truetype');
}


@mixin box {
    // background: rgba(2, 0, 77, .4);
    // border: 2px solid #0d53b7;
    // box-shadow: inset 0 0 34px rgb(17 40 255 / 66%);
}

@mixin boxtitle {
    width: 100%;
    height: 30px;
    background: rgba(2, 0, 77, 0.4);

    background-blend-mode: normal;
    // border: 2px solid rgba(13, 83, 183, 1);
    // box-shadow: inset 0px 0px 34px rgba(17, 40, 255, 0.66);
    mix-blend-mode: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
        mix-blend-mode: normal;
        color: rgba(25, 236, 255, 1);
        font-size: 14px;
        font-weight: 700;
        height: 20px;

    }

    .line {
        height: 3px;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;

        img {}
    }
}

@mixin flex_center {
    width: 100%;
    display: flex;
    flex-wrap: wrap;


    .flex-box {
        height: 350px;
        width: 33.333333%;
        padding: 5px;


        .flex-box-container {
            width: 100%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            // background-color: white;
            border: 2px solid rgba(0, 0, 0, 0);



            .flex-box-title {
                height: 30px;
                padding: 5px 0;
                width: 100%;
            }

            .flex-box-center {
                flex: 1;
                width: 100%;
                display: flex;

                .children {}

                // background-color: rgba(18, 169, 174, 0.427);
            }

            .echart-container {
                background-blend-mode: normal;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;

                .echart-title {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 10px;


                    .text {
                        flex: 1 1 0%;
                        padding-right: 50px;
                        // color: rgb(255, 255, 255);
                        font-size: 16px;
                        font-weight: 500;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        word-break: keep-all;
                        padding-left: 10px;
                        border-bottom: 1px solid rgb(132, 146, 166);
                        border-left: 4px solid aqua;
                    }

                    .tips {
                        color: rgb(132, 146, 166);
                        font-size: 12px;
                        line-height: 18px;
                        margin-top: 4px;
                        overflow: hidden;

                        .btn {
                            color: #8492a6;

                            margin-right: 5px;
                        }

                        .btn:last-child {}

                        .active {
                            color: rgb(0, 114, 207);
                        }

                        .down {
                            float: right;
                        }
                    }
                }

                .echart-container-center {
                    // background-color: white;
                    width: 100%;
                    flex: 1;

                    .res-progress {}
                }
            }

        }

        .flex-box-container:hover {
            // border: 2px solid rgb(0, 114, 207);
        }
    }
}

@mixin check_center {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .check-container {
        height: 350px;
        width: 33.333333%;
        padding: 5px;

        .checkbox {
            width: 100%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            background-color: white;
            border: 2px solid rgba(0, 0, 0, 0);

            .box-header {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .box-title {
                    .text {
                        color: #9ba2ab;
                        // cursor: pointer;
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 400;
                        height: 22px;
                        line-height: 22px;
                        margin-right: 50px;
                        mix-blend-mode: normal;
                        padding-bottom: 25px;
                    }
                }

                .switchBtn {
                    span {
                        display: inline-block;
                    }

                    .btn {
                        background: #f2f2f2;
                        background-blend-mode: normal;
                        color: #74798c;
                        cursor: pointer;
                        display: inline-block;
                        height: 28px;
                        line-height: 28px;
                        margin-right: 10px;
                        mix-blend-mode: normal;
                        text-align: center;
                        width: 44px;
                    }

                    .active {
                        color: white;
                        background-color: dodgerblue;
                    }
                }
            }

            .box-container {
                .flex-box {
                    height: 300px;
                }
            }
        }

    }


}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    // color: white;
}

// btn 按钮基本样式
.btn {
    cursor: pointer;
}



// 大模块样式通用
.module {
    padding: 10px;
}

.drag-widget-container {
    border: 1px solid rgba(0, 0, 0, 0);
    height: 100%;
    width: 100%;
}




// 媒体查询 echart-container样式
// @media screen and (min-width:384px) {
//     .drag-widget-container {
//         width: 100%;
//     }
// }

// @media screen and (min-width:768px) {
//     .drag-widget-container {
//         width: 50%;
//     }
// }

// @media screen and (min-width:992px) {
//     .drag-widget-container {
//         width: 25%;
//     }
// }



// 图表模块样式
.echart-container {
    background-blend-mode: normal;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .echart-title {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;


        .text {
            flex: 1 1 0%;
            padding-right: 50px;
            // color: rgb(255, 255, 255);
            font-size: 16px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: keep-all;
            padding-left: 10px;
            border-bottom: 1px solid rgb(132, 146, 166);
            border-left: 4px solid aqua;
        }

        .tips {
            color: rgb(132, 146, 166);
            font-size: 12px;
            line-height: 18px;
            margin-top: 4px;
            overflow: hidden;

            .btn {
                color: #8492a6;

                margin-right: 5px;
            }

            .btn:last-child {}

            .active {
                color: rgb(0, 114, 207);
            }

            .down {
                float: right;
            }
        }
    }

    .echart-container-center {
        // background-color: white;
        width: 100%;
        flex: 1;
    }
}

.cardView {
    width: 100%;
    // height: 350px;
    padding: 5px;
    display: flex;
    flex-direction: column;

    .card-container {
        width: 100%;
        height: 100%;
        background-color: white;
        padding: 5px;

        div.card-title {
            font-weight: 400;

        }
    }

    .card-center {
        width: 100%;
        flex: 1;
        display: flex;
        min-height: 350px;

        .Tabbox {
            height: 350px;
            flex: 1;
            padding: 5px;

            .table-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                .table-item {
                    width: 33.33333%;
                    height: 100px;
                    padding: 5px;

                    .tableItem-center {
                        // border: 1px solid rgb(132, 146, 166);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        span {
                            display: block;
                            // width: 100%;
                            text-align: center;
                            padding: 5px 0;
                        }

                        .lable {
                            font-size: 14px;
                            line-height: 22px;
                            color: #595959;
                        }

                        .text {
                            font-size: 18px;
                            line-height: 26px;
                            display: inline-block;
                            font-weight: 600;
                            color: #000;
                        }

                        .tips {
                            display: inline-block;
                            text-align: center;
                            width: 80px;
                            border-radius: 50px;
                            padding: 3px;
                            background: #fee9ec;
                            color: #f72941 !important;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}

.check-container {
    width: 33.33333%;
    height: 350px;

    .checkbox {}
}


// 模板主题
@mixin dark {
    background: #02004d;
}

// 主要text颜色1
@mixin main_text_color {
    color: rgb(226, 226, 226);
    text-shadow: 0 0 3px rgb(20 157 255);
}

// 主要title颜色1
@mixin main_title_color {
    color: #0470dd;
    text-shadow: 0 0 3px rgba(20, 157, 255, 0.06);
}